<template>
  <el-form status-icon ref="formRef">
    <div class="cpro-requirement">
      <cpro-public title="项目描述" :show-stat="true">
        <template v-slot:content>
          <wageditor
            :projectDescribe="props.projectDescribe"
            @describeUpdate="describeUpdate"
          ></wageditor>
        </template>
      </cpro-public>
    </div>
  </el-form>
  <el-upload
    ref="upload"
    drag
    action="#"
    :auto-upload="false"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :on-change="getFile"
    :limit="1"
  >
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <template #tip>
      <div class="el-upload__tip text-red" style="margin-left: 20px">
        只能上传一个文件，后面的会覆盖前面的，文件大小不超过 5MB
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import cproPublic from '@/components/creat-projects/cpro-public.vue'
import wageditor from '@/components/wageditor/wageditor.vue'
import { ElForm, genFileId } from 'element-plus'
import type { UploadRawFile, UploadFile, UploadInstance, UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { ref, defineEmits, defineProps } from 'vue'

const props = defineProps(['projectDescribe'])
const emit = defineEmits(['requirementUpdate', 'addition'])
//附件
const addition = new FormData()
const upload = ref<UploadInstance>()

const describeUpdate = (value: any) => {
  emit('requirementUpdate', value)
}
//移除文件
const handleRemove = () => {
  upload.value!.clearFiles()
}
//超出文件个数
// const handleExceed: UploadProps['onExceed'] = (files) => {
//   upload.value!.clearFiles()
//   const file = files[0] as UploadRawFile
//   file.uid = genFileId()
//   upload.value!.handleStart(file)
//   if (file.size && file.size / 1024 / 1024 > 5) {
//     ElMessage.error('上传文件大小不能超过 5MB')
//     handleRemove()
//   }
//   addition.append('file', file, file.name)
//   emit('addition', addition)
// }
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const newFile = files[0] as UploadRawFile
  if (newFile.size / 1024 / 1024 > 5) {
    ElMessage.error('上传文件大小不能超过 5MB')
    return
  }
  newFile.uid = genFileId()
  upload.value!.handleStart(newFile)
  addition.delete('file')
  addition.append('file', newFile, newFile.name)
  emit('addition', addition)
}

//得到文件数据
const getFile = async (file: UploadFile) => {
  if (file.size && file.size / 1024 / 1024 > 5) {
    ElMessage.error('上传文件大小不能超过 5MB')
    handleRemove()
  }
  addition.append('file', file.raw as Blob, file.name)
  emit('addition', addition)
}
//校验内容是否为空
const vailDate = (): Boolean => {
  if (props.projectDescribe == '' || addition.has('file')) {
    ElMessage({
      showClose: true,
      message: '请填写项目描述或上传附件',
      type: 'error'
    })
    return true
  } else {
    return false
  }
}
defineExpose({ vailDate })
</script>

<style lang="less" scoped>
.cpro-requirement {
  padding: 2px 0px 0 8px;
  .item {
    margin: 0 0 4px 0;
    .pro-text {
      width: 1070px;
    }
  }
}
/deep/ .el-upload {
  --el-upload-dragger-padding-horizontal: 15px;
  padding: 0 16px;
}
/deep/ .el-upload-dragger {
  position: static;
}
// 隐藏全屏
/deep/.w-e-bar.w-e-bar-show.w-e-toolbar .w-e-bar-item:last-child {
  display: none;
}
/deep/ .el-upload-list__item {
  margin-left: 10px;
}
</style>
